import asides from '@/components/aside.vue';
<template>
  <el-col class="bill">
    <el-col class="title">发票配置列表</el-col>
    <el-col class="box">
      <el-table :data="resarr" border stripe>
        <el-table-column
          v-for="col in columns"
          :prop="col.id"
          :key="col.id"
          :label="col.label"
          :width="col.width"
        ></el-table-column>
        <el-table-column>
          <template slot-scope="scope">
            <template v-if="scope.row.status == 1">
              <el-button type="warning" @click="enopne(scope.row)" size="mini"
                >禁用</el-button
              >
            </template>
            <template v-else>
              <el-button type="primary" @click="open(scope.row)" size="mini"
                >启用</el-button
              >
            </template>

            <el-button
              v-if="scope.row.status != 1"
              type="danger"
              size="mini"
              @click="edit(scope.row)"
            >
              <i class="el-icon-edit"></i> 修改
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
    <el-col class="bottom">
      <el-button type="primary" size="mini" @click="addconfig"
        >添加发票配置</el-button
      >
    </el-col>
    <el-dialog
      title="添加发票配置"
      :visible.sync="addbill"
      width="520px"
      @close="end"
      :modal-append-to-body="false"
    >
      <el-form
        :model="formbill"
        :rules="rules"
        size="mini"
        ref="formbill"
        label-width="140px"
      >
        <el-form-item label="发票名称" prop="name">
          <el-input v-model="formbill.name"></el-input>
        </el-form-item>
        <el-form-item label="发票数量" prop="number">
          <el-input v-model="formbill.number" type="number"></el-input>
        </el-form-item>
        <el-form-item label="发票限额(￥)" prop="amount">
          <el-input v-model="formbill.amount" type="number"></el-input>
        </el-form-item>
        <el-form-item label="发票税率(%)" prop="tax_rate">
          <el-input v-model="formbill.tax_rate" type="number"></el-input>
        </el-form-item>
        <el-form-item label="自动开票预警数量" prop="limit_amount">
          <el-input
            v-model="formbill.limit_amount"
            type="number"
            placeholder="自动开票时剩余发票不足多少时的预警数量"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('formbill')">{{
            editbool ? "修改" : "立即创建"
          }}</el-button>
        </el-form-item>
      </el-form>

      <span slot="footer">
        <el-button @click="addbill = false" size="mini">取 消</el-button>
      </span>
    </el-dialog>
  </el-col>
</template>
<script>
export default {
  data() {
    return {
      addbill: false,
      editbool: false,
      formbill: {
        name: "",
        number: "",
        amount: "",
        tax_rate: "",
        tax_id: "",
        limit_amount: "",
      },
      //   验证规则
      rules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        number: [
          { required: true, message: "请输入发票数量", trigger: "change" },
        ],
        amount: [
          { required: true, message: "请输入发票限额", trigger: "blur" },
        ],
        tax_rate: [
          { required: true, message: "请输入发票税率", trigger: "blur" },
        ],
        limit_amount: [
          {
            required: true,
            message: "发票不足时预警数量",
            trigger: "blur",
          },
        ],
      },
      resarr: [],
      columns: [
        {
          id: "name",
          label: "发票名称",
        },
        {
          id: "number",
          label: "发票数量",
        },
        {
          id: "amount",
          label: "发票限额(元)",
        },
        {
          id: "tax_rate",
          label: "税率（%）",
        },
        {
          id: "limit_amount",
          label: "发票不足预警",
        },
      ],
    };
  },
  mounted() {
    this.tax_rate_list();
  },
  methods: {
    addconfig() {
      this.addbill = true;
    },
    end() {
      this.addbill = false;
      this.formbill = {
        name: "",
        number: "",
        amount: "",
        tax_rate: "",
        tax_id: "",
        limit_amount: "",
      };
      this.editbool = false;
      this.tax_rate_list();
    },
    edit(row) {
      this.formbill = row;
      this.editbool = true;
      this.addbill = true;
      this.formbill.tax_id = row.id;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.onsubmit();
        } else {
          return false;
        }
      });
    },
    async onsubmit() {
      let res = await this.$store.dispatch("tax_config", this.formbill);
      if (!res.code) {
        this.$message({
          type: "success",
          message: this.editbool ? "修改成功" : "创建成功",
        });
        this.end();
        this.tax_rate_list();
      } else {
        this.$message.error("添加失败");
      }
    },
    async tax_rate_list() {
      let res = await this.$store.dispatch("tax_rate_list", "");
      if (!res.code) {
        this.resarr = res.data;
        // console.log(res);
      }
    },
    async enopne(row) {
      this.$confirm("确认要将该配置禁用?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.open(row);
          // this.$message({
          //   type: "success",
          //   message: "删除成功!"
          // });
        })
        .catch(() => {
          // this.$message({
          //   type: "info",
          //   message: "已取消删除"
          // });
        });
    },
    async open(row) {
      let data = {
        tax_id: row.id,
      };
      let res = await this.$store.dispatch("enable_tax_config", data);
      if (!res.code) {
        this.$message({
          type: "success",
          message: res.data,
        });
        this.tax_rate_list();
      }
    },
  },
};
</script>
<style lang="scss" >
.bill {
  padding: 30px;
  text-align: left;
}
.box {
  padding: 30px;
  background-color: #ffffff;
}
.bottom {
  padding-top: 15px;
}
</style>